<template>
	<view class="content">
		<bgyx-nav-bar>
			<div slot="left">
				<u-icon name="arrow-left" size="40" @click="goBack"></u-icon>
			</div>
			<div slot="default">
				<b style="font-size: 32rpx;">选择好友</b>
			</div>
			<view slot="right" style="display: flex;justify-content: flex-end;align-items: center;">
				
			</view>
		</bgyx-nav-bar>


		<view class="">
			<view style="width: 750rpx;">
				<view v-for="(friend,k) in list" class="list-cell">
					<image :src="friend.avatar" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;" mode="">
					</image>
					<view class="name-view">
						<text>{{friend.name}}</text>
						<u-checkbox v-model="friend.checked"></u-checkbox>
					</view>
				</view>
			</view>
		</view>
		
		
		<u-popup v-model="show" mode="center" border-radius="16">
			<view style="padding: 30rpx;display: flex;flex-direction: column;width: 600rpx;">
				<view style="margin: 10rpx 0rpx 20rpx 0rpx;font-weight: 500;font-size: 36rpx;">
					填写群聊名称
				</view>
				<u-input v-model="name" type="text" :border="true" />
				<view style="margin: 30rpx auto 10rpx auto;font-weight: 500;">
					<u-button @click="makeGroup" shape="circle" type="primary" size="medium">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		
		<view style="background: #f3f3f3; width: 100%;height: 120rpx;display: flex;align-items: center;justify-content: center;position: fixed;bottom:0rpx;left: 0rpx;">
			<view style="width: 500rpx;margin-top: 10rpx;">
				<u-button @click="show = true" type="primary" :disabled="list.filter(e=>e.checked).length < 2">建立群聊({{list.filter(e=>e.checked).length}})</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
import store from '../../../store';
	export default {
		data() {
			return {
				list:[],
				show:false,
				name:''
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState({
				// 从state中拿到数据 箭头函数可使代码更简练
				friends: state => {
					const data = state.address.friends
					const obj = {}
					for (let o of data) {
						if (obj[o.name_letter]) {
							obj[o.name_letter].push(o)
						} else {
							obj[o.name_letter] = [o]
						}
					}
					console.log(999, obj)
					return obj;
				},
				apply: state => {
					return state.address.apply
				}
			})
		},
		onLoad() {
			const keys = Object.keys(this.friends)
			for(let k of keys){
				const flist = this.friends[k]
				for(let f of flist){
					this.list.push(f)
				}
			}
		},
		methods: {
			goBack: function() {
				uni.navigateBack()
			},
			makeGroup:function(){
				const check = this.list.filter(e=>e.checked)
				const _this = this
				uni.showLoading({
					title:"群聊创建..."
				})
				this.$store.dispatch({
					type:"chats/makeGroup",
					payload:{
						name:this.name,
						list:check,
						callback:function(e){
							console.log(4234234,e)
							_this.show = true
							_this.$store.dispatch({
								type:"gchat/getGChatMessageInit",
								payload:{
									id:e.data.id,
									callback:()=>{
										_this.list = []
										uni.hideLoading()
										_this.$socket.send({
											type:"makeNewGroup",
											data:{
												group_id:e.data.id
											}
										})
										uni.redirectTo({
											url:"/pages/chat/group/index?id=" + e.data.id
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-bottom: 120rpx;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
		border-bottom: 1rpx solid #e3e3e355;
	}

	.name-view {
		margin-left: 16rpx;

		flex: 1;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>